<template>
	<view>
		<view style="background:#f7f7f7;padding-top:35upx" v-if="data.goods_list!=data.undefault&&data.goods_list!=''&&data.tab_detail=='active'">
    <view class="recommend">
        <view class="recommend-left"></view>
        <image :src="data.__wxapp_img.dapp.good_recommend.url"></image>
        <text class="recommend-text">相关推荐</text>
        <view class="recommend-right"></view>
    </view>
    <view style="padding-top:32upx">
        <view class="goods-list">
            <navigator :class="['goods-item', index%2?'pic-right':'pic-left']" openType="navigate" style="font-size:11pt;" :url="'/pages/goods/goods?id='+item.id" v-for="(item,index) in data.goods_list" :key="item.id">
                <image class="goods-pic" mode="aspectFill" :src="item.pic_url"></image>
                <view class="goods-info" style="padding:5upx 20upx;">
                    <text class="mb-10 text-more-2" style="height:2.8em;line-height:1.4;">{{item.name}}</text>
                    <view class="flex-row">
                        <view class="flex-grow-1" style="color:#ff334b">￥{{item.price}}</view>
                        <view class="flex-grow-0 fs-sm" style="color:#999;" v-if="data.__is_sales">已售{{item.sales}}</view>
                    </view>
                </view>
            </navigator>
        </view>
        <view :class="['loading-more', data.is_loading?'active':'']">
            <image :src="data.__wxapp_img.system.loading.url"></image>
        </view>
    </view>
</view>

	</view>
</template>
<script>var myVue = {};
	export default {
		props:['data']
	}
</script>
<style scoped>
.goods-item {
    width: 370upx;
    display: inline-block;
    position: relative;
    padding: 0 5upx;
    margin-bottom: 14upx;
    font-size: 0;
    background: #fff;
}

.goods-item .goods-pic {
    width: 100%;
    height: 370upx;
}

.goods-item .goods-info {
    padding: 0 10upx;
}

.goods-item .goods-name {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 10upx;
    font-size: 11pt;
    display: block;
    text-align: center;
}

.goods-item .goods-price {
    font-size: 11pt;
    color: #f40;
    display: block;
    text-align: center;
}

.recommend {
    background: #f7f7f7;
    margin: 0 270upx;
    text-align: center;
    position: relative;
}

.recommend-left {
    height: 1upx;
    width: 85upx;
    background: #bbb;
    display: inline-block;
    position: absolute;
    top: 50%;
    left: -45%;
    transform: translateY(-50%);
}

.recommend image {
    height: 24upx;
    width: 24upx;
    margin-right: 12upx;
}

.recommend-text {
    font-size: 10pt;
    color: #888;
}

.recommend-right {
    height: 1upx;
    width: 85upx;
    background: #bbb;
    display: inline-block;
    position: absolute;
    top: 50%;
    right: -45%;
    transform: translateY(-50%);
}
</style>